<template>
  <!-- 业务图形化展示 -->
  <div class="view-box">
    <div class="line-item flex align-start pt-10 pb-10">
      <div v-for="(station,stationIndex) in stationList" :key="stationIndex" class="flex">
        <!-- 站点间纤芯 -->
        <div
          v-if="stationIndex !== 0"
          class="cable-box flex-column justify-around align-center"
        >
          <span class="no-warp station-name">
            {{ station.cableName || '' }}
          </span>
          <div class="w-100 fiber-box">
            <el-divider content-position="center" class="node-item">
              {{ station.hasFiber ? station.fiber[0].fiberName : '' }}
            </el-divider>
            <el-divider
              v-if="bizChannelList.length === 2"
              content-position="center"
              class="node-item"
            >
              {{ station.hasFiber ? station.fiber[1].fiberName : '' }}
            </el-divider>
          </div>
        </div>
        <div class="flex-column align-center">
          <span class="no-warp station-name">{{
            getRegionName(station.stationId)
          }}</span>
          <div class="station-box">
            <div
              v-for="(node, index) in station.nodeList"
              :key="node.nodeId"
              class="flex align-center"
              :style="{ alignItems: index !== 0 ? 'unset' : '' }"
            >
              <!-- 站点内连接关系 -->
              <div
                v-if="index !== 0"
                class="cable-box flex-column align-center"
              >
                <div class="fiber-box flex-column justify-center">
                  <el-divider content-position="center" class="node-item">
                    {{ node.hasFiber ? node.fiber[0].fiberName : '' }}
                  </el-divider>
                  <el-divider
                    v-if="node.startPort2"
                    content-position="center"
                    class="node-item"
                  >
                    {{ node.hasFiber ? node.fiber[1].fiberName : '' }}
                  </el-divider>
                </div>
                <span class="mt-10 device-name">
                  {{ node.cableName || '' }}
                </span>
              </div>
              <!-- 节点信息 -->
              <div class="flex-column align-center">
                <div class="flex">
                  <div
                    v-if="node.startPort"
                    class="p-5 flex-column justify-center"
                  >
                    <i class="el-icon-help" :title="node.startPort.bizName" />
                    <i
                      v-if="node.startPort2"
                      class="el-icon-help mt-10"
                      :title="node.startPort2.bizName"
                    />
                  </div>
                  <i class="iconfont" :class="getIcon(node)" />
                  <div
                    v-if="node.endPort"
                    class="p-5 flex-column justify-center"
                  >
                    <i class="el-icon-help" :title="node.endPort.bizName" />
                    <i
                      v-if="node.endPort2"
                      class="el-icon-help mt-10"
                      :title="node.endPort2.bizName"
                    />
                  </div>
                </div>
                <span class="mt-10 device-name">{{ node.nodeName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getParentsById } from '@/utils/common'
  export default {
    props: {
      bizChannelList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        stationList: [],
        iconData: {
          AFS: 'icon-AFSa-151',
          ODF: 'icon-AFSa-153',
          TRANSPORT: 'icon-AFSjiaohuanji',
          LIGHT_SPLIT: 'icon-AFSa-159'
        }
      }
    },
    computed: {
      ...mapGetters(['regionTree'])
    },
    mounted() {
      // this.formatData()
      this.categoryByRegionId()
    },
    methods: {
      // 获取节点icon图标
      getIcon(node) {
        let iconCode = 'icon-AFSa-151'
        if (node.type === 'CLUSTER') {
          iconCode = 'icon-AFSwangluoxitong'
        } else {
          iconCode = this.iconData[node.nodeCategory] || iconCode
        }
        return iconCode
      },
      // 查询区域、站点名
      getRegionName(regionId) {
        const regionList = (
          getParentsById(this.regionTree, regionId, 'regionId') || []
        ).reverse()
        return regionList.map(i => i.regionName).join('/')
      },
      // 整合站点节点数据
      formatData() {
        console.log(this.bizChannelList)
        const firstChannel = this.bizChannelList[0].segmentList
        const secondChannel = this.bizChannelList[1]
          ? this.bizChannelList[1].segmentList
          : null
        const stationList = []
        firstChannel.forEach((i, index) => {
          // 添加第一个网段的start节点，后面节点默认添加end节点
          if (index === 0) {
            stationList.push({
              stationId: i.startNode.stationId,
              nodeList: [
                {
                  ...i.startNode,
                  startPort: null,
                  endPort: i.startPort,
                  startPort2: null,
                  endPort2: secondChannel ? secondChannel[index].startPort : null
                }
              ]
            })
          }
          const portData = {
            startPort: i.endPort,
            endPort: null,
            startPort2: secondChannel ? secondChannel[index].endPort : null,
            endPort2: null
          }
          if (index !== firstChannel.length - 1) {
            portData.endPort = firstChannel[index + 1].startPort
            portData.endPort2 = secondChannel
              ? secondChannel[index + 1].startPort
              : null
          }
          // 有光缆添加光缆信息
          let fiberData = {}
          if (i.fiber) {
            fiberData = {
              hasFiber: true,
              cableName: '纤芯' + i.fiber.fiberName,
              fiber: [i.fiber]
            }
            if (secondChannel) {
              fiberData.fiber.push(secondChannel[index].fiber)
            }
          }
          // 站点内部节点添加(以最后一个站点做判断，可以重复添加已有站点，回环显示)
          const lastStation = stationList.length ? stationList[stationList.length - 1] : {}
          const stationData = lastStation.stationId === i.endNode.stationId ? lastStation : null
          // 站点信息添加
          if (stationData) {
            let nodeItem = { ...i.endNode, ...portData }
            // 站内光缆
            if (i.startNode.stationId === i.endNode.stationId) {
              nodeItem = { ...nodeItem, ...fiberData }
            }
            stationData.nodeList.push(nodeItem)
          } else {
            let stationItem = {
              stationId: i.endNode.stationId,
              nodeList: [{ ...i.endNode, ...portData }]
            }
            // 站点间光缆
            if (i.startNode.stationId !== i.endNode.stationId) {
              stationItem = { ...stationItem, ...fiberData }
            }
            stationList.push(stationItem)
          }
        })
        this.stationList = stationList
        console.log('stationList', stationList)
      },
      categoryByRegionId() {
        console.log(this.bizChannelList)
        this.stationList = []
        let categoryId = 0 //使用数字区分不同的机房
        let segmentList = this.bizChannelList[0].segmentList
        let lastRegionId = this.bizChannelList[0].segmentList[0].endNode.stationId
        let deviceList = []
        segmentList.forEach((i, index) => {
          if (index === 0) {
            if (lastRegionId !== i.startNode.stationId) {
              lastRegionId = i.startNode.stationId
              categoryId++
            }
            i.startNode.categoryId = categoryId
            i.startNode.startPort = null
            i.startNode.startPort2 = null
            i.startNode.endPort = i.startPort
            // 如果是双芯双向业务，还有第2个端口
            i.startNode.endPort2 = this.bizChannelList.length == 2 ? this.bizChannelList[1].segmentList[i].startPort : null
            deviceList.push(i.startNode)
          }
          if (lastRegionId !== i.endNode.stationId) {
            lastRegionId = i.endNode.stationId
            categoryId++
          }
          i.endNode.categoryId = categoryId
          i.endNode.startPort = i.endPort
          i.endNode.startPort2 = null
          i.endNode.endPort = segmentList[index+1] ? segmentList[index+1].startPort : null
          i.endNode.endPort2 = null
          if (i.fiberId) {
            i.endNode.hasFiber = true
            i.endNode.fiber = []
            i.endNode.fiber[0] = i.fiber
          }
          deviceList.push(i.endNode)
          if (index === segmentList.length - 1) {
            this.stationList = []
            for (let j = 0; j <= categoryId; j++) {
              this.stationList.push({
                stationId: '',
                nodeList: []
              })
            }
            console.log(deviceList)
            deviceList.forEach(i => {
              if (i.categoryId === 0) {
                // 第一个站点
                this.stationList[0].stationId = i.stationId
              } else if (i.categoryId === categoryId) {
                // 最后一个站点
                this.stationList[i.categoryId].stationId = i.stationId
              } else {
                // 中间站点
                this.stationList[i.categoryId].stationId = i.stationId
              }
              if (i.hasFiber) {
                this.stationList[i.categoryId].hasFiber = i.hasFiber
                this.stationList[i.categoryId].fiber = i.fiber
              }
              this.stationList[i.categoryId].nodeList.push(i)
            })
            console.log('stationList', this.stationList)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
::v-deep .view-box .station-name .el-divider__text.is-center {
      white-space: nowrap;
    }
.view-box {
  .line-item {
    overflow-y: auto;

    .station-name {
      height: 40px;
      font-size: 12px;
      line-height: 40px;
    }
  }
  .station-box {
    display: flex;
    padding: 20px;
    justify-content: center;
    border: 2px dashed #333;

    .iconfont {
      font-size: 60px;
      color: #00aeff;
    }
    .cable-box {
      margin-top: 0;
      min-width: 50px;

      .fiber-box {
        padding: 0;
        height: 61px;
      }

      .station-name {
        height: auto;
        line-height: 1.2;
      }
    }

    .node-item {
      width: 80px;
    }

    .el-icon-help {
      font-size: 12px;
      cursor: pointer;
    }
  }
  .cable-box {
    min-width: 150px;

    .fiber-box {
      display: flex;
      padding: 20px 10px 0;
      height: 85px;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }
  }
  .node-item {
    margin: 0 10px;
  }

  .device-name {
    width: 90px;
    text-align: center;
    font-size: 12px;
  }
}
</style>
